
<template>

    <div class="login" clearfix>
        <div class="login-wrap">
            <el-row type="flex" justify="center">
                <el-form ref="loginForm" :model="user" :rules="rules" status-icon label-width="80px">
                    <h3><span>登录</span></h3>
                    <hr>
                    <el-form-item prop="user_login" label="用户名">
                        <el-input v-model="user.user_login" placeholder="请输入用户名" prefix-icon></el-input>
                    </el-form-item>
                    <el-form-item id="password" prop="password" label="密码" >
                        <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
                    </el-form-item>

                    <el-form-item style="padding-right: 96px;margin-top: 30px;">
                        <el-button type="primary" icon="el-icon-upload" @click="doLogin()">登 录</el-button>
                    </el-form-item>
                    <router-link to="/PassWordNew">已有帐号，忘记密码？</router-link>
                    |
                    <router-link to="/Register" style="padding-left: 10px;">没有帐号？点此注册！</router-link>

                </el-form>
            </el-row>
        </div>
    </div>

</template>


<script>
    import { login } from "@/api/api.js";
    import {nameRule,passRule} from "@/utils/validateFrom";

    export default {
        name: "Login",
        data() {
          return {
                user: {
                    user_login: "",
                    password: ""
                },
            rules:{
                user_login: [{ validator: nameRule,min:2,max:16,required: true,trigger: 'blur'}],
                password: [{ validator: passRule,min:4,max:16,required: true,trigger: 'blur'}],
              }
            };
        },
        created() {},
        methods: {
            doLogin() {

              this.$refs.loginForm.validate((valid)=>{
                  if (valid){
                    // 去空格后在进行加密
                    // console.log("this.user.password",this.md5(this.user.password.replace(/\s*/g,'')));
                    this.user.password = this.md5(this.user.password.replace(/\s*/g,''));
                    login(this.user).then(res =>{
                        console.log('res',res)
                      // alert(res.msg);
                    }).catch(error =>{
                        console.error('error',error)
                      alert(error.message || 'Error')
                      this.$router.go(0)
                    })
                  }else{
                    console.error("登录失败")
                     // alert('登录失败');
                    //
                  }
              })



                // if (!this.user.user_login) {
                //     this.$message.error("请输入用户名！");
                //     return;
                // } else if (!this.user.password) {
                //     this.$message.error("请输入密码！");
                //     return;
                // } else {
                //     //校验用户名和密码是否正确;
                //     // this.$router.push({ path: "/personal" });
                //     axios
                //         .post("/login/", {
                //             name: this.user.user_login,
                //             password: this.user.password
                //         })
                //         .then(res => {
                //             // console.log("输出response.data.status", res.data.status);
                //             if (res.data.status === 200) {
                //                 this.$router.push({ path: "/personal" });
                //             } else {
                //                 alert("您输入的用户名或密码错误！");
                //             }
                //         });
                // }
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .login {
        width: 100%;
        //height: 800px;
        /*background: url("../assets/images/OIP-C.png") no-repeat;*/
        background-size: cover;
        overflow: hidden;
    }
    .login-wrap {
        /*background: url("../assets/images/OIP-C.png") no-repeat;*/
        background-size: cover;
        width: 80%;
        height: 80%;
        margin: 0px auto;
        overflow: hidden;
        padding-top: 10px;
        line-height: 40px;
    }
    #password {
        margin-bottom: 5px;
    }
    h3 {
        color: #0babeab8;
        font-size: 24px;
    }
    hr {
        background-color: #444;
        margin: 20px auto;
    }
    a {
        text-decoration: none;
        color: #aaa;
        font-size: 15px;
    }
    a:hover {
        color: coral;
    }
    .el-form-item {
        padding-right: 36px;
    }
</style>